<template>
    <!-- 取消询价验证码验证 -->
    <m-dialog title="平台提示" width="30%" :show-dialog.sync="showDialog" :before-close="handleClose">
      <div class="text f16 textcenter mbt30">
        <m-form>
          <m-form-item label="请选择取消的原因" :label-width="formLabelWidth">
            <Select
              placeholder="请选择活动区域"
              v-model="form.title"
              type="grey">
              <Option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.title"
                :value="item.id">
                </Option>
              </Select>
          </m-form-item>
          <m-form-item label="请填写详细说明" :label-width="formLabelWidth">
            <m-input type="textarea" show-word-limit v-model="form.content" placeholder="请填写详细说明" />
          </m-form-item>
          <m-form-item label="请选择校验方式" :label-width="formLabelWidth">
            <radio-group v-model="form.type">
              <m-radio label="phone">手机号验证</m-radio>
              <m-radio label="email">邮箱验证</m-radio>
            </radio-group>
          </m-form-item>
          <m-form-item label="邮箱" :label-width="formLabelWidth" v-if="form.type === 'email'">
            <div class="item-center">
              <p>{{ $store.state.userInfo.email }}</p>
              <p @click="sendCode">{{ text}}</p>
            </div>
          </m-form-item>
          <m-form-item label="手机号" :label-width="formLabelWidth" v-else>
            <div class="item-center">
              <p>{{ $store.state.userInfo.phone }}</p>
              <p @click="sendCode">{{text}}</p>
            </div>
          </m-form-item>
          <m-form-item label="短信或邮箱验证码" :label-width="formLabelWidth">
            <m-input
              type="text"
              maxLength="6"
              show-word-limit
              placeholder="请输入短信或邮箱验证码"
              v-model="form.sms_code"
            />
          </m-form-item>
        </m-form>
      </div>
      <div class="btns" style="display: flex; justify-content: center">
        <m-button
          width="180"
          type="dark"
          @click="handleClose"
          style="margin-right: 10px"
        >取消</m-button>
        <m-button width="180" @click="handlerConfirm">确定</m-button>
      </div>
    </m-dialog>
</template>
<script>
import MDialog from "@/components/common/m-dialog/MDialog";
import MButton from "@/components/common/m-button/MButton";
import MInput from "@/components/common/m-input/MInput";
import MRadio from "@/components/common/m-radio/MRadio";
import MSelect from "@/components/common/m-select/MSelect";
import MFormItem from "@/components/common/m-form/MFormItem";
import MForm from "@/components/common/m-form/MForm";
import { RadioGroup, Option,Select } from "element-ui";
import { userPhoneOrEmail, cancelDemandApi,cancelNameList } from '@/request/api';

export default {
    components: {
      MDialog,
      MButton,
      MInput,
      MRadio,
      MSelect,
      MFormItem,
      MForm,
      Option,
      Select,
      RadioGroup
    },
    props: {
      showDialog: {
        type: Boolean,
        default: false
      },
      demandId: {
        type:String | Number,
        default: 0
      }
    },
    data() {
      return {
        formLabelWidth: "150px",
        form: {
          type: 'phone',
          sms_code:'',
          content:'',
          title:''
        },
        typeOptions: [
          { label: "不需要询价", value: 1 },
          { label: "另外选职", value: 0 }
        ],
        text: '发送验证码',
        totalTime: 60,
        flag: false,
      }  
    },
    mounted() {
      this.getCancelList()
    },
    methods: {
      async handlerConfirm(){
        const res = await cancelDemandApi(this.demandId,{...this.form});
        try{
          if(res.status !== 200) return this.$message.error(res.message)
          this.$message.success(res.message)
          this.handleClose()
        }catch(err) {
          this.$message.error(err.message)
        }
      },
      /** 关闭弹窗 */
      handleClose() {
          this.$emit('handleClose')
      },
      /** 获取手机验证码或者邮箱验证码
       * @param type phone是电话 email是邮箱
       */
      sendCode() {
        if(this.flag)return false;
        userPhoneOrEmail(this.form.type).then(res => {
          if(res.status !== 200) return this.$message.error(res.message)
          this.$message.success('发送成功，请注意查收！')
          this.flag = true
          this.text = this.totalTime + 's后重新发送'
          let clock = window.setInterval(() => {
          this.totalTime--
          this.text = this.totalTime + 's后重新发送'
          if (this.totalTime < 0) {
            window.clearInterval(clock)
            this.text = '重新发送验证码'
            this.totalTime = 60
            this.flag = false
          }
          }, 1000)
        }).catch(err => {
          this.$message.error(err.message)
        })
      },
      getCancelList() {
        cancelNameList().then(res => {
          if(res.status !== 200) return this.$message.error(res.message)
          this.typeOptions = res.data
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    }
}
</script>
<style lang="scss" scoped>
  .item-center {
    display: flex;
    justify-content: center;
    align-items: center;

    > p {
      margin: 0 10px;
    }

    > p:nth-child(2) {
      text-decoration: underline;
      cursor: pointer;
    }
  }
/deep/ .el-input__inner {
    background-color: #F3F4F8;
    border-radius: 10px;
    border-color: #e9e9e9;
}
</style>